<template>
  <div class="gl-border">

    <div class="content-item">
      <div>
        <p>房源位置：
          <el-select v-model="queryParams.schoolAreaId"
                     placeholder="--校区--"
                     @change="cascade('campus')"
                     size="small">
            <el-option v-for="(item, index) in campus"
                       :key="index"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.campusId"
                     placeholder="--园区--"
                     @change="cascade('gardens')"
                     size="small">
            <el-option v-for="(item, index) in gardens"
                       :key="index"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.buildingId"
                     placeholder="--楼栋--"
                     size="small">
            <el-option v-for="(item, index) in buildings"
                       :key="index"
                       :label="item.number + '-' + item.unitNumber"
                       :value="item.id">
            </el-option>
          </el-select>
          <el-input v-model="queryParams.roomNum"
                    placeholder="请输入房间号"
                    size="small"
                    style="width: 215px;"></el-input>
        </p>
        <base-info-select :queryParams="queryParams">
          <el-input v-model="queryParams.key"
                    placeholder="请输入学生学号或姓名"
                    size="small"
                    style="width: 215px;margin-top: 15px;"></el-input>
        </base-info-select>

      </div>
      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
      <el-button type=""
                 size="small"
                 @click="reset">重置</el-button>
      <el-button type=""
                 size="small"
                 @click="$router.push({name: 'bedSet'})">床位设置</el-button>
      <el-button type=""
                 size="small"
                 @click="exportExl('./api/apertment/exportStudentRoomBedInfo', queryParams)">导出</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class="table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>

  </div>
</template>
<script>
import { pagination } from '@/tools/mixin'
import { exportFile } from '@/tools/utils'
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  listStudentRoomInfoUsingPOST,
  enableRoomUsingGET
} from '@api/auto'
import baseInfoSelect from '@components/baseInfoSelect'
export default {
  components: {
    baseInfoSelect
  },
  mixins: [pagination],
  data () {
    return {
      queryParams: {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomNum: null,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        sex: null,
        key: null
      },
      campus: [],
      gardens: [],
      buildings: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.queryParams.campusId = ''
        this.queryParams.buildingId = ''
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.queryParams.buildingId = ''
        this.listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId)
      },
      total: 0,
      title: '',
      addOrEditShow: false,
      tabData: [],
      columns: [
        { label: '园区', prop: 'campusName' },
        { label: '楼栋', prop: 'buildingName' },
        { label: '楼层', prop: 'floorName' },
        { label: '房间', prop: 'room' },
        { label: '床号', prop: 'bedNum' },
        { label: '是否启用', prop: 'isEnable' },
        { label: '是否入住', prop: 'statusName' },
        { label: '学号', prop: 'sn' },
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' },
        { label: '学生类型', prop: 'objectOrientedName' },
        { label: '学院', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '年级', prop: 'gradeName' },
        { label: '班级', prop: 'className' }
      ],
      sepecCol: [
        { label: '是否启用', prop: 'isEnable', tem: `<switch-vue :isActive="Boolean(row.isEnable)" @switchChange="that.$parent.switchChange(row)"></switch-vue >` }
        // { label: '性别', prop: 'gender', tem: '<span>{{$transSexUnknow(gender)}}</span>' }
      ]
    }
  },
  created () {
    this.query()
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 获取校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
      })
    },
    // 获取园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
      })
    },
    // 获取楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        this.buildings = res.data
      })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listStudentRoomInfoUsingPOST(this.queryParams).then(res => {
        this.tabData = res.data ? res.data.list : []
        this.total = res.data ? res.data.total : 0
      })
    },
    reset () {
      this.queryParams = {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomNum: null,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        sex: null,
        key: null
      }
      this.query()
    },
    exportExl (url, body) {
      if (this.tabData.length) exportFile(url, body)
      else this.$message.error('数据为空，不能下载')
    },
    // 启停床位
    switchChange (row) {
      enableRoomUsingGET(row.bedId, row.isEnable === 0 ? 1 : 0, 0).then(res => {
        let index = this.tabData.findIndex(item => item.bedId === row.bedId)
        this.tabData[index].isEnable = this.tabData[index].isEnable === 0 ? 1 : 0
        // this.query()
        this.$message.success('操作成功')
      })
    }

  }
}
</script>
